<template>
  <div class='hello'>
    <ul>
      <li><a target="_blank" href="http://www.ncmem.com/webapp/zyoffice/index.aspx">官网</a></li>
      <li><a target="_blank" href="http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c">布署服务端</a></li>
    </ul>
    <!-- 工具栏容器 -->
    <div id='toolbar-container'></div>
    <!-- 编辑器容器 -->
    <div id='editor'>
        <p>zyOffice for vue2-cli-ckeditor5</p>
    </div>    
  </div>
</template>

<script>
import CKEditor from '../../static/ckeditor'
import {zyOffice} from '../../static/zyoffice/js/w'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    // 初始化
    zyOffice.getInstance({
      word: 'http://localhost:13710/zyoffice/word/convert',
      wordExport: 'http://localhost:13710/zyoffice/word/export',
      pdf: 'http://localhost:13710/zyoffice/pdf/upload'      
    })
    this.initCKEditor()
  },
  methods: {
    initCKEditor () {
      CKEditor.create(document.querySelector('#editor')).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container')
        toolbarContainer.appendChild(editor.ui.view.toolbar.element)
        this.editor = editor
        zyOffice.getInstance().SetEditor(editor)
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
